<template>
  <div style="margin-bottom: 10px;margin-top: 10px">
    <a-button type="primary" @click="handleOpen">
      <template #icon>
        <PlusOutlined />
      </template>
      新增
    </a-button>
    <a-button style="margin-left: 5px" type="primary" danger @click="handleDel" v-show="selectedRowKeys.length > 0">
      <template #icon>
        <DeleteOutlined />
      </template>
      批量删除
    </a-button>
  </div>
  <my-alert @onClearSelected="onClearSelected" :selectedRowKeys="selectedRowKeys"></my-alert>
  <a-table
      :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
      :pagination="false"
      :columns="columns"
      :data-source="permissionList"
      :scroll="{ x: 'max-content'}"
  >
    <template #bodyCell="{ column, text, record }">
      <template v-if="column.key === 'menuType'">
        {{(record.menuType === 0 || record.menuType === 1) ? '菜单' : '按钮/权限'}}
      </template>
      <template v-if="column.key === 'action'">
        <more-btn-container>
          <a @click="edit(record)">编辑</a>
          <a @click="detail(record)">详情</a>
          <a @click="editNext(record)">添加下级</a>
          <a-popconfirm
              title="是否要删除?"
              ok-text="是"
              cancel-text="否"
              @confirm="delOne(record)"
              @cancel="cancel"
          >
            <a>删除</a>
          </a-popconfirm>
        </more-btn-container>

      </template>
    </template>
  </a-table>
  <add-permission-drawer v-if="openD" :keys="key" :radio="radio"  :openD="openD" @handleClose="handleClose" :currentApp="appCode"></add-permission-drawer>
  <edit-permission-drawer :isDetail="isDetail" v-if="openE" :openE="openE" :item="items" :currentApp="appCode"
               @handleCloseDetail="handleCloseDetail" @handleClose="handleCloseEdit" >
  </edit-permission-drawer>
</template>
<script setup>
import {onMounted, ref} from "vue";
import {deleteBatch, deleteOne, getPermissionList, getSysAppList} from "@/api/system/index.js";
import {message, Modal} from "ant-design-vue";
import AddPermissionDrawer from "@/components/drawer/addPermissionDrawer.vue";
import EditPermissionDrawer from "@/components/drawer/editPermissionDrawer.vue";
import MoreBtnContainer from "@/components/moreBtnContainer/index.vue";
import MyAlert from "@/components/alert/my-alert.vue";
const columns = [
  {
    title: '菜单名称',
    dataIndex: 'name',
    key: 'name'
  }, {
    title: '菜单类型',
    dataIndex: 'menuType',
    key: 'menuType',
  },{
    title: 'icon',
    dataIndex: 'icon',
    key: 'icon',
    scopedSlots: { customCell: 'icon' }
  },
  {
    title: '组件',
    dataIndex: 'component',
    key: 'component',
    scopedSlots: { customCell: 'component' }
  },
  {
    title: '路径',
    dataIndex: 'url',
    key: 'url',
    scopedSlots: { customCell: 'url' }
  },
  {
    title: '排序',
    dataIndex: 'sortNo',
    key: 'sortNo',
    scopedSlots: { customCell: 'sortNo' }
  },
  {
    title: '操作',
    dataIndex: 'action',
    key:'action',
    fixed: 'right',
    scopedSlots: { customCell: 'action' },
    align: 'center',
    width: 150
  }
]
// const type = ref('')
const key = ref('')
const radio =  ref('')
const appCode = ref(0)
const permissionList =ref([])
const selectedRowKeys = ref([])
const items = ref({})
const openD = ref(false)
const openE = ref(false)
const isDetail = ref(false)

/**
 * 获取列表内容
 * @returns {Promise<void>}
 */
const getList = async () => {
  try {
    onClearSelected()
    const res = await getPermissionList({appCode:appCode.value})
    permissionList.value = res.result
  } catch (error) {
    message.error(error)
  }
}
/**
 * 选中列表项触发事件
 * @param e 选中的列表项
 */
const onSelectChange = (e) => {
  selectedRowKeys.value = e
}
/**
 * 清空选中的列表项
 */
const onClearSelected = () => {
  selectedRowKeys.value = []
}
/**
 * 打开新增抽屉
 */
const handleOpen = () => {
  key.value = ''
  radio.value = '0'
  openD.value = true
}
/**
 * 打开编辑抽屉
 */
const edit = (item) => {
  openE.value = true
  items.value = item
  isDetail.value = false
}
/**
 * 打开详情抽屉
 */
const detail = (item) => {
  openE.value = true
  items.value = item
  isDetail.value = true
}
/**
 * 关闭新增抽屉
 */
const handleClose = () => {
  openD.value = false
  getList()
}
/**
 * 关闭编辑抽屉
 */
const handleCloseEdit = () => {
  openE.value = false
  getList()
}
/**
 * 关闭详情抽屉
 */
const handleCloseDetail = () => {
  openE.value = false
  isDetail.value = false
}
/**
 *  删除选中项
 */
const handleDel = async () => {
  Modal.confirm({
    title: '确定删除？',
    content: '是否删除选中数据',
    okText: '确认',
    cancelText: '取消',
    async onOk(){
      let ids = ''
      for (let i = 0; i < selectedRowKeys.value.length; i++) {
        ids += selectedRowKeys.value[i] + ",";
      }
      const res = await deleteBatch('/sys/permission/deleteBatch',{ids:ids})
      if(res.success){
        message.success('删除成功')
        await getList()
      }
    },
    onCancel(){},
  });
}
/**
 * 单条删除
 */
const delOne = async (item) => {
  const res = await deleteOne('/sys/permission/delete', { id: item.id })
  if(res.success){
    message.success('删除成功')
    await getList()
  }
}
const cancel = () => {

}
/**
 *  切换类型
 */
// const changeType = (e) => {
//   appCode.value = e.target.value
//   getList()
// }
/**
 * 添加下级
 */
const editNext = (record) => {
  key.value = record.key
  radio.value = '1'
  console.log('key', key.value)
  openD.value = true
}
onMounted(async ()=>{
  // const res = await getSysAppList()
  // type.value = appCode.value = res.result[0].appCode
  await getList()
})
</script>
<style scoped>

</style>
